chrome devtools
【vscode有一个live server插件,还有一个eslint代码规范化】
功能简介
elements元素面板:检查和调整也你俺,调试DOM,调试CSS。
network网络面板:调试请求,了解页面静态资源分布,网页性能
console控制台面板:调试js,查看consolelog日志,交互式代码调试
sources源代码资源面板:调试js页面源代码,进行断点调试代码
application应用面板:查看&调试客户端存储,如cokkie,LocalStorage,SessionStorage
performance性能面板:查看页面性能细节,细粒度对网页载入进行性能优化(高阶)
memory内存面板:js cpu分析器,内存堆分析器(高阶)
security安全面板:查看页面安全及证书问题
audits面板:使用google lighthouse辅助性能分析,给出优化建议(高阶)
elements
可以双向选择,在elements的左面有选项
点击代码中一段后,可以用ctrl
+f
进行搜索
可以修改内容和属性
document.querySelectAll(‘img’)
$0返回当前选中代码
右键—>copy js path
右键—>break on
提供断点、删除
调节样式及CSS
elements—>styles 可以直接修改或者点击右侧进入文件(左下角有{}
可以将css代码格式化)
filter可以过滤想找的样式名
盒模型(box model)
在元素中增加类与伪类
:hov显示/不显示元素状态
:cls增加一个类
+增加一个规则
(!important强制提升优先级)
animation (例如transmission: 1s ease-in-out)
console调试js
交互式编程
console. log/table/group/warn/error(异常逻辑catch)
console custom 定制样式 [console.log(“%c123”), “color:red”]
console.assert(false, ‘断言失败’)
console.time()
这里是函数代码
console.timeEnd()
console.clear()清除
Sources
使用断点调试js
区别于以前的反复回到本地文件里修改console.log
可以写一个debuger执行到这一行的时候程序会自动暂停,可以在Source的右下角的scope里看各个变量的值,Source左下角看各种事件
使用snippets:比如可以临时引入jQuery库
使用filesystem:模拟本地文件目录
Network
查看网页资源分布、针对单已请求查看request、response或者时间消耗等waterfull
Application
cookies: name value domain等等
可以通过document.cookie=”test=1”
localstorage.get/setItem(‘’)
- 本文作者: Raphael_Li
- 本文链接: https://lifei-2019.github.io/chrome devtools/
- 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!